<template>
  <view class="container">
    <yh_input label="项目名称" placeholder="请输入" v-model="projectName" />
    <yh_input label="项目地址" placeholder="请输入" v-model="projectAddress" />
    <yh_input label="项目编号" placeholder="请输入" v-model="projectNo" />
    <yh_input label="甲方单位名称" placeholder="请输入" v-model="partyName" />
    <view class="checking-tips-info">* 以上四项请至少填写一项</view>
    <yh_input label="省" placeholder="请输入" v-model="province" />
    <yh_input label="市" placeholder="请输入" v-model="city" />
    <yh_input label="区" placeholder="请输入" v-model="country" />
    <yh_input
      label="项目状态"
      placeholder="请输入"
      v-model="projectState"
      :image="true"
      :disabled="true"
      @click="handleSelectClick('projectState', true)"
    />
    <yh_input
      label="项目类型"
      placeholder="请输入"
      v-model="projectType"
      :image="true"
      :disabled="true"
      @click="handleSelectClick('projectType', true)"
    />
    <yh_input
      label="业务类别"
      placeholder="请输入"
      v-model="businessType"
      :image="true"
      :disabled="true"
      @click="handleSelectClick('businessType', true)"
    />
    <yh_input
      label="项目合作性质"
      placeholder="请输入"
      v-model="projectCooperationType"
      :image="true"
      :disabled="true"
      @click="handleSelectClick('projectCooperationType', true)"
    />
    <yh_input
      label="项目池类型"
      placeholder="请输入"
      v-model="projectPoolType"
      :image="true"
      :disabled="true"
      @click="handleSelectClick('projectPoolType', true)"
    />

    <view class="submit_button">
      <nut-button
        class=""
        size="large"
        type="primary"
        shape="square"
        color="#DC2734"
        @click="handleChecked(true)"
        >查询
      </nut-button>
    </view>
    <nut-popup
      closeable
      close-icon-position="top-right"
      position="bottom"
      v-model:visible="selectShow"
      round
      :style="{ width: '100%' }"
      pop-class="popup_select"
    >
      <view class="title">{{ selectedOptions.name }}</view>
      <view class="content">
        <view
          v-for="(item, index) in selectedOptions.list"
          :key="index"
          class="content-item"
          @click="handOptionsSelected(item, selectedOptions.type)"
          >{{ item }}
        </view>
      </view>
    </nut-popup>

    <nut-popup
      closeable
      close-icon-position="top-right"
      round
      position="bottom"
      v-model:visible="resultShow"
      :style="{ height: '80%', width: '100%' }"
      pop-class="popup_bottom"
    >
      <view class="title">{{ resultTiTle }}</view>
      <div class="content">
        <view class="header">
          <nut-row flex-wrap="nowrap" gutter="20px">
            <nut-col :span="8">
              <view class="flex-content">项目名称</view>
            </nut-col>
            <nut-col :span="6">
              <view class="flex-content flex-content-light">甲方状态</view>
            </nut-col>
            <nut-col :span="4">
              <view class="flex-content">项目状态</view>
            </nut-col>
            <nut-col :span="4">
              <view class="flex-content">接收人</view>
            </nut-col>
          </nut-row>
        </view>
        <view
          class="table-body"
          v-for="(item, index) in resultList"
          :key="index"
        >
          <nut-row flex-wrap="nowrap" gutter="20px">
            <nut-col :span="8">
              <view class="flex-content">{{ item.projectName }}</view>
            </nut-col>
            <nut-col :span="6">
              <view class="flex-content">{{ item.ownerName }}</view>
            </nut-col>
            <nut-col :span="4">
              <view class="flex-content">{{ item.projectStatus }}</view>
            </nut-col>
            <nut-col :span="4">
              <view class="flex-content">{{ item.recevierName }}</view>
            </nut-col>
          </nut-row>
        </view>
      </div>
    </nut-popup>
  </view>
</template>

<script lang="ts">
import { reactive, toRefs} from "vue";
import Taro from "@tarojs/taro";
import yh_input from "@/components/yh-input.vue";

export default {
  name: "project-report",
  components: { yh_input },
  setup() {
    const state = reactive({
      projectName: "",
      projectAddress: "",
      projectNo: "",
      partyName: "", //甲方名称
      province: "",
      city: "",
      country: "",
      projectState: "",
      projectType: "",
      businessType: "",
      projectCooperationType: "",
      projectPoolType: "", //项目池类型
      resultList: [
        {
          projectName: "(北京顺义)盒马鲜生华北运营中心项目",
          ownerName: "北京盒马网络科技有限公司",
          projectStatus: "已接收",
          recevierName: "某某某",
        },
      ],
      resultTiTle: "查询结果",
      resultShow: true,
      addressStr: "",
      name: "",
      saleType: "",
      selectShow: false,
      selectOptions: {
        projectType: {
          type: "projectType",
          name: "项目类型",
          list: ["新建", "改建", "扩建"],
        },
        projectState: {
          type: "projectState",
          name: "项目状态",
          list: ["待审核", "分配中", "已分配", "已接收", "分公司拒绝"],
        },
        businessType: {
          type: "businessType",
          name: "业务类别",
          list: ["建筑粉料", "建筑防水/建筑修缮", "节能保温"],
        },
        projectCooperationType: {
          type: "projectCooperationType",
          name: "项目合作性质",
          list: ["一般项目", "集采客户立项", "集采单体项目"],
        },
        projectPoolType: {
          type: "projectPoolType",
          name: "项目池类型",
          list: ["项目池1", "项目池2", "项目池3"],
        },
      },
      selectedOptions: {},
    });
    const handleChecked = (show: boolean) => {
      state.resultShow = show;
    };
    const handleSelectClick = (
      options: string,
      selectShow: boolean = false
    ) => {
      state.selectedOptions = state.selectOptions[options];
      state.selectShow = selectShow;
    };
    //handOptionsSelected
    const handOptionsSelected = (
      selectedValue: string,
      selectedOptionName: string
    ) => {
      state.selectShow = false;
      state[selectedOptionName] = selectedValue;
      console.log("selectedValue is :" + selectedValue);
    };
    const handleGo = (url: string) => {
      Taro.navigateTo({
        url: url,
      });
    };

    return {
      ...toRefs(state),
      handleSelectClick,
      handOptionsSelected,
      handleGo,
      handleChecked,
    };
  },
};
</script>

<style lang="scss">
.container {
  .checking-tips-info {
    background: #fff4e8;
    padding: 7px 15.5px;
    font-size: 11px;
    font-weight: 400;
    color: #eb8b2c;
    line-height: 16px;
  }
  .popup_bottom {
    .title {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #11161f;
      line-height: 22px;
      display: flex;
      flex-direction: column;
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 15px 0px;
    }
    .content {
      border-top: 1px #eeeeee solid;
      .header {
        width: 375px;
        background: #464557;
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 16px;
        padding: 6px 0px 6px 16px;
      }
      .table-body {
        padding: 16px 0px 16px 20px;
        overflow-wrap: wrap;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 16px;
      }
    }
  }
}
</style>
